<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 加载进度条 -->
      <!-- <div v-loading="loading" class="dashboard-container"></div> -->
      <!-- 组织架构 -->
      <el-card>
        <Treetools :tree-node="company" :isroot="true" @addDepts="addpepts" />
        <!-- 下面内容 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <Treetools slot-scope="obj" :tree-node="obj.data" @addDepts="addpepts" @editDepts="editDepts" @delDepts="getDepartments" />
        </el-tree>
      </el-card>
    </div>
    <div>
      <Adddept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
      <!-- <child @changedialog="method" /> -->
    </div>
  </div>
</template>

<script>
import Treetools from './components/tree-tools'
import Adddept from './components/add-dept.vue'

import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
export default {
  components: {
    Treetools,
    Adddept
  },
  data() {
    return {
      loading: false,
      departs: [],
      defaultProps: {
        label: 'name' // 显示子节点
      },
      company: {},
      showDialog: false, // 关闭显示窗体
      node: null // 记录当前的节点
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    method(value) {
      this.showDialog = value
    },
    async getDepartments() {
      this.loading = true
      const result = await getDepartments()
      this.departs = tranListToTreeData(result.depts, '')
      this.company = { name: result.companyName, manager: '负责人', id: '' } // 这里定义一个空串  因为 它是根 所有的子节点的数据pid 都是 ""
      this.loading = false
    },
    // 点击新增
    addpepts(node) {
      this.showDialog = true
      this.node = node
    },
    editDepts(node) {
      this.showDialog = true
      this.node = node
      // 调用方法
      this.$refs.addDept.getDepartDetail(node.id) // 直接调用子组件中的方法
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}

</style>
